<template>
    <div id="vision-Record">
        <div id="trend-chart">
            <div class="title">
                视力走势图
            </div>
            <!--        折线图-->
            <canvas id="chart" style="width: 100%;height: 200px;">

            </canvas>
        </div>
        


    </div>
</template>

<script>
    import F2 from "@antv/f2";
    // import {Cell, CellGroup, Grid, GridItem} from "vant";
    // import { Image as VanImage } from 'vant';

    export default {
        name: "visionRecord",
        components: {
   /*          "van-cell": Cell,
            "van-cell-group": CellGroup,
            "van-grid": Grid,
            "van-grid-item": GridItem,
            "van-image":VanImage */
        },
        data(){
            return {
                image:[
                    require('../../assets/Snipaste_2020-08-14_22-01-11.png'),
                ]
            }
        }
        ,
        methods: {
            chartRender() {
                const data = [{
                    day: '周一',
                    value: 300
                }, {
                    day: '周二',
                    value: 400
                }, {
                    day: '周三',
                    value: 350
                }, {
                    day: '周四',
                    value: 500
                }, {
                    day: '周五',
                    value: 490
                }, {
                    day: '周六',
                    value: 600
                }, {
                    day: '周日',
                    value: 900
                }];

                const chart = new F2.Chart({
                    id: 'chart',
                    pixelRatio: window.devicePixelRatio
                });

                chart.source(data, {
                    value: {
                        tickCount: 5,
                        min: 0
                    },
                    day: {
                        range: [0, 1]
                    }
                });
                chart.tooltip({
                    showCrosshairs: true,
                    showItemMarker: false,
                    onShow: function onShow(ev) {
                        const items = ev.items;
                        items[0].name = null;
                        items[0].value = '$ ' + items[0].value;
                    }
                });
                chart.axis('day', {
                    label: function label(text, index, total) {
                        const textCfg = {};
                        if (index === 0) {
                            textCfg.textAlign = 'left';
                        } else if (index === total - 1) {
                            textCfg.textAlign = 'right';
                        }
                        return textCfg;
                    }
                });
                chart.line().position('day*value');
                chart.point().position('day*value').style({
                    stroke: '#fff',
                    lineWidth: 1
                });
                chart.render();
            }
        },
        mounted() {
            this.chartRender();
        }
    }
</script>

<style lang="less">
    #vision-Record {
        margin-top: 60px;
    }
    #trend-chart {
        .title {
            margin-top: 20px;
            margin-left: 10px;
        }
    }
    #first{
        text-align: center;
    }

</style>
